﻿@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<link href="~/layui_ext/dtree/dtree.css" rel="stylesheet" />
<link href="~/layui_ext/dtree/font/dtreefont.css" rel="stylesheet" />


<div style="padding: 20px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md2">
            <div class="layui-card">
                <div class="layui-card-header">用户组管理</div>
                <div class="layui-card-body">
                    <ul id="demoTree" class="dtree" data-id="0"></ul>
                </div>
            </div>
        </div>
        <div class="layui-col-md10">
            <div class="layui-card">
                <div class="layui-card-body">

                    <table class="layui-hide" id="test-table-cellEdit" lay-filter="test-table-cellEdit"></table>

                    <script type="text/html" id="test-table-totalRow-toolbarDemo">
                        <div class="layui-btn-container">
                            <button class="layui-btn " lay-event="btnAdd">添加菜单</button>
                            <button class="layui-btn layui-btn-warm" lay-event="btnDelete">删除</button>
                        </div>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="testdiv" style="display:none">
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body" pad15>
                        <form class="layui-form" id="formDemo" lay-filter="formDemo" action="">
                            <div class="layui-form" lay-filter="">
                                <input type="text" name="id" value="" class="layui-hide">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">菜单编码</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="menuId" value="" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">菜单名称</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="title" value="" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">上级编码</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="partnerId" value="" class="layui-input">
                                    </div>
                                </div>
                                
                                <div class="layui-form-item">
                                    <label class="layui-form-label">菜单路径</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="tab_url" value=""  class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">菜单图标</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="icon" value=""  class="layui-input">
                                    </div>
                                </div>
                                 <div class="layui-form-item">
                                    <label class="layui-form-label">菜单层级</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="leave" value=""  class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item layui-form-text">
                                    <label class="layui-form-label">备注</label>
                                    <div class="layui-input-block">
                                        <textarea name="remarks" placeholder="请输入内容" class="layui-textarea"></textarea>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                    </div>
                                </div>

                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

        <script type="text/html" id="test-table-switchTpl">
            <!-- 这里的 checked 的状态只是演示 -->
            <input type="checkbox" name="userGroupId" lay-skin="switch" lay-text="是|否" lay-filter="test-table-sexDemo"
                    value="{{ d.userGroupId }}" data-json="{{ encodeURIComponent(JSON.stringify(d)) }}" {{ d.userGroupId != 0 ? 'checked' : '' }}>
        </script>


<script src="~/layui/layui.js"></script>
<script>
    layui.extend({ //设定模块别名
        dtree: '{/}/layui_ext/dtree/dtree' //如果 dtree.js 是在根目录，也可以不用设定别名
    }).use(['layer', 'dtree', 'table', 'form'], function () {
        var element = layui.element,
            table = layui.table,
            $ = layui.$,
            layer = layui.layer,
            form = layui.form,
            dtree = layui.dtree
        var UserGroupId = 0;
         
        var index = 0;
        debugger;
        table.render({
            elem: '#test-table-cellEdit'
            , toolbar: '#test-table-totalRow-toolbarDemo'
            , url: '/Admin/Menu/List'
            , where: { UserGroupId: UserGroupId }
            , page: true //开启分页
            , height: 612
            , even: true //隔行背景
            , defaultToolbar: ['filter', 'exports']
            , cols: [[
                { type: 'checkbox' }
                , { field: 'id', title: 'ID', width: 80, sort: true }
                , { field: 'userGroupId', title: '是否授权', width: 100,templet: '#test-table-switchTpl' } 
                , { field: 'menuId', title: '菜单编码', width: 120, sort: true, }
                , { field: 'title', title: '菜单名称', width: 120, sort: true, }
                , { field: 'partnerId', title: '上级编码', width: 120, }
                , { field: 'tab_url', title: '菜单路径', minWidth: 150 }
                , { field: 'icon', title: '菜单图标', minWidth: 150 }
                , { field: 'leave', title: '菜单层级', minWidth: 150 } 
            ]]
        })
        //头工具栏事件
        table.on('toolbar(test-table-cellEdit)', function (obj) {
            debugger;
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'btnAdd':
                    var data = checkStatus.data;
                    // menuId, title, partnerId, tab_url, leave, icon,
                    form.val("formDemo", {
                        "menuId": ""
                        , "id": ""
                        , "title": ""
                        , "partnerId": ""
                        , "tab_url": ""
                        , "leave": ""
                        , "icon": ""
                    })
                    index = layer.open({
                        type: 1,
                        title: "新增",
                        area: ["650px", "650px"],
                        shadeClose: true,
                        shade: 0.1,
                        maxmin: true,
                        content: $("#testdiv"), //这里content是一个普通的String
                    });
                    break;
                case 'btnUpdate':
                    var data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                    break;
                case 'btnDelete':
                    var data = checkStatus.data;

                    $.post("/Admin/Menu/Delete", { model: data },
                        function (data) {

                            //执行重载
                            table.reload('test-table-cellEdit');
                            layer.msg("删除成功!", { icon: 1 });

                        });

                    break;
            };
        });

        form.on('submit(formDemo)', function (data) {
            debugger;
            if (UserGroupId == 0) {

                layer.msg('请选择用户组!', { icon: 2 });
                return;
            }
            data.field.UserGroupId = UserGroupId;
            $.post("/Admin/Menu/Add", { model: data.field }, function (data) {

                layer.close(index);//关闭当前页
                //执行重载
                table.reload('test-table-cellEdit');

                layer.msg('添加成功!', { icon: 1 });

            });
            return false;
        });
        form.on('switch(test-table-sexDemo)', function(data){
            debugger;
            if(UserGroupId==0||UserGroupId=="9999"){
                console.log("没有选择需要授权的组...");
                //执行重载
                table.reload('test-table-cellEdit');
                return;
            }
            var json=decodeURIComponent(data.elem.getAttribute('data-json'));
            json=eval('('+json+')');
           // console.log(json);
            json.userGroupId=UserGroupId;
            if(data.elem.checked){
                json.isTrue=1;
            }else{
                json.isTrue=0;
            }
            $.post("/Admin/Menu/MenuGroupRelationUpdate", { model: json }, function (data) {
                //执行重载
                table.reload('test-table-cellEdit');
            });
        
        });  
        //监听行双击事件
        table.on('rowDouble(test-table-cellEdit)', function (obj) {
            debugger;
            //obj 同上 menuId, title, partnerId, tab_url, leave, icon,
            form.val("formDemo", {
                "id": obj.data.id
                ,"menuId": obj.data.menuId
                , "title": obj.data.title
                , "partnerId": obj.data.partnerId
                , "tab_url": obj.data.tab_url
                , "leave": obj.data.leave
                , "icon": obj.data.icon 
            })
            index = layer.open({
                type: 1,
                title: "新增",
                area: ["650px", "650px"],
                shadeClose: true,
                shade: 0.1,
                maxmin: true,
                content: $("#testdiv"), //这里content是一个普通的String
            });
        });

       


        var DTree1 = dtree.render({
            elem: "#demoTree",
            url: "/Admin/UserGroup/TreeList",
            ficon: ["1", "-1"],
            dataFormat: "list",
            toolbar: true,
            toolbarWay: "follow",
            toolbarShow: ["add", "edit", "delete"],
            record: true, toolbarStyle: {
                title: "用户组",
                area: ["450px", "450px"]
            }, toolbarBtn: [
                [
                    { "label": "用户组", "defElem": "nowChange" },
                    { "label": "备注", "name": "remarks", "type": "textarea" }

                ],
                [
                    { "label": "用户组", "defElem": "nowChange" },
                    { "label": "备注", "name": "remarks", "type": "textarea" }

                ] // 自定义编辑页的内容
            ],
            toolbarFun: {
                loadToolbarBefore: function (buttons, param, $div) {
                    debugger;
                    if (param.context == "用户组管理") {
                        buttons.editToolbar = "";
                        buttons.delToolbar = "";
                    }
                    if (param.leaf&&param.level!="1") { // 如果是叶子节点
                        buttons.addToolbar = "";  // 取消新增功能
                    }
                    return buttons; // 将按钮对象返回
                },
                addTreeNode: function (treeNode, $div) {
                    debugger;
                    var data = {
                        title: treeNode.addNodeName,
                        remarks: treeNode.remarks,
                        parentId: treeNode.parentId
                    }
                    $.post("/Admin/UserGroup/Add", { model: data }, function (data) {

                        layer.msg('添加成功!', { icon: 1 });
                        DTree1.changeTreeNodeAdd(true);

                    });
                },
                editTreeLoad: function (treeNode) {
                    debugger;
                    var recordData = treeNode.recordData;  // 取出
                    recordData = dtree.unescape(recordData); // 转义
                    var recordDataJSON = JSON.parse(recordData);  // 转成JSON格式
                    if (typeof (recordDataJSON.remarks) == "object") {
                        recordDataJSON.remarks = "";
                    }
                    var param = { editNodeName: treeNode.context, title: treeNode.context, remarks: recordDataJSON.remarks };
                    DTree1.changeTreeNodeDone(param); // 配套使用
                },
                editTreeNode: function (treeNode, $div) {
                    debugger;
                    var data = {
                        id: treeNode.nodeId,
                        title: treeNode.editNodeName,
                        remarks: treeNode.remarks,
                        parentId: treeNode.parentId
                    }
                    treeNode.context = treeNode.title;
                    $.post("/Admin/UserGroup/Add", { model: data }, function (data) {
                        DTree1.changeTreeNodeEdit(true);
                    });
                },
                delTreeNode: function (treeNode, $div) {

                    var data = [{
                        id: treeNode.nodeId
                    }];
                    $.post("/Admin/UserGroup/Delete", { model: data }, function (data) {
                        DTree1.changeTreeNodeDel(true); // 删除成功
                        layer.msg("删除成功!", { icon: 1 });
                    });
                }

            }
        });
        dtree.on("node('demoTree')", function (obj) {
            debugger;
            UserGroupId = obj.param.nodeId;

            //执行重载
            table.reload('test-table-cellEdit', {
                where: { UserGroupId: UserGroupId }
            });
            // layer.alert(JSON.stringify(obj.param));

            // layer.alert('你好，体验者');

            console.log(obj.param); // 点击当前节点传递的参数
            console.log(obj.dom); // 当前节点的jquery对象
            console.log(obj.childParams); // 当前节点的所有子节点参数
            console.log(obj.parentParam); // 当前节点的父节点参数
        });

      


    });
</script>